// @ts-nocheck
import React, { FC, useState, useEffect } from 'react'
import axios from '@/api/request'
import { useNavigate, useParams } from 'react-router-dom'
import style from '@/style/articles/tagclass.module.scss'

const TagClass: FC = ({ change, reset }) => {
  const navigate = useNavigate()
  const params = useParams().id
  // 获取数据
  const [idx, setIdx] = useState(0)
  const [data, setData] = useState([])
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-floating-promises
    axios.get('/wipi/api/tag').then((res) => {
      setData(res.data)
    })
    setIdx(params)
  }, [])

  // 跳转路由
  const btn = (value: any): any => {
    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
    navigate(`/articles/tag/${value}`)
    change(-1)
    reset()
    setIdx(value)
  }
  return (
    <div className={style.tagclass}>
      <h4>文章标签</h4>
      <div className={style.tags}>
      {data.map((item: any, index) => {
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        return (
          <span className={idx === item.value ? style.on : ''} onClick={() => btn(item.value)} key={index}>
            {item.label}[{item.articleCount}]
          </span>
        )
      })}
      </div>
    </div>
  )
}

export default TagClass
